import logo from "@/assets/logo.png"
import { FooterLayout } from "@/components/utils/footer"
import { HeadUser } from "@/components/utils/head.user"
import LeftMenu from "@/components/utils/left.menu"
import { NavBread } from "@/components/utils/nav.bread"
import common from "@/css/common.module.css"
import baseUserService from "@/services/base.user.service"
import { StoreContext } from "@/store"
import { useMobx } from "@whzhuke/mobx"
import { Layout as AntdLayout, Avatar, Col, Flex, Row, theme } from "antd"
import React, { useContext, useLayoutEffect } from "react"
import { Outlet, useNavigate } from "react-router"
const { Header, Footer, Sider, Content } = AntdLayout

const Layout = useMobx(() => {
  const {
    token: { colorBgContainer }
  } = theme.useToken()
  const { UserStore } = useContext(StoreContext)
  const nav = useNavigate()
  useLayoutEffect(() => {
    if (UserStore.user) {
      Promise.all([baseUserService.authInfo(UserStore.user.id)]).then(([e]) => {
        UserStore.setMenu(e.data.authorities)
      })
    } else {
      nav(`/auth/login`, { replace: true })
    }
  }, [UserStore.user])

  return (
    <AntdLayout className={common.full}>
      <Sider collapsible>
        <Row justify="center" style={{ padding: "20px 0" }}>
          <Col>
            <Avatar size={40} src={logo}></Avatar>
          </Col>
        </Row>
        <div style={{ overflowY: "auto", flex: 1 }}>
          <LeftMenu />
        </div>
      </Sider>
      <AntdLayout>
        <Header style={{ background: colorBgContainer }}>
          <HeadUser />
        </Header>
        <Content style={{ margin: "1rem 1.5rem" }}>
          <Flex vertical className={common.full} gap="middle">
            <NavBread />
            <Flex flex={1} style={{ height: 0 }}>
              <Outlet />
            </Flex>
          </Flex>
        </Content>
        <Footer>
          <FooterLayout />
        </Footer>
      </AntdLayout>
    </AntdLayout>
  )
})

export default Layout
